<template>
  <div class="box">
    <div>
      <van-icon @click="fun()" class="fanhui" name="arrow-left" />
      <p>{{ text }}</p>
      <van-icon @click="fun1()" class="tuichu" name="cross" />
    </div>
    <div>
      <img :src="img[0]" alt="" />
    </div>
    <div>
      <h3><van-icon name="label-o" />{{ arr[0] }}</h3>
      <div>
        <div><img :src="img[1]" alt="" /></div>
        <div>
          <div><img :src="img[2]" alt="" /></div>
          <div><img :src="img[3]" alt="" /></div>
        </div>
      </div>
    </div>
    <div>
      <h3><van-icon name="shop-o" />{{ arr[1] }}</h3>
      <div class="box1">
        <div><img :src="img[4]" alt="" /></div>
        <div><img :src="img[5]" alt="" /></div>
      </div>
    </div>
    <div>
      <h3><van-icon name="point-gift-o" />{{ arr[2] }}</h3>
      <div class="box2"><img :src="img[6]" alt="" /></div>
      <div class="box1">
        <div><img :src="img[7]" alt="" /></div>
        <div><img :src="img[8]" alt="" /></div>
        <div><img :src="img[9]" alt="" /></div>
        <div><img :src="img[10]" alt="" /></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["活动专区", "特色网点", "福利专区"],
      text: "数字人民币专区",
      img: [
        "./img/life/num01.png",
        "./img/life/num02.png",
        "./img/life/num03.png",
        "./img/life/num04.png",
        "./img/life/num05.png",
        "./img/life/num06.png",
        "./img/life/num07.png",
        "./img/life/num08.png",
        "./img/life/num09.png",
        "./img/life/num10.png",
        "./img/life/num11.png",
      ],
    };
  },
  methods: {
    fun() {
      this.$router.go(-1);
    },
    fun1() {
      this.$router.push("/life");
    },
  },
};
</script>

<style lang="scss" scoped>
img {
  border-radius: 10px;
}
.box {
  width: 100%;
  > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    line-height: 0.5rem;
    background-color: skyblue;
    > .tuichu,
    > .fanhui {
      font-size: 0.2rem;
      padding: 0.17rem;
    }
    > p {
      font-size: 0.2rem;
    }
  }
  > div:nth-child(2) {
    margin: auto;
    margin-top: 0.2rem;
    width: 3.5rem;
    > img {
      width: 3.5rem;
    }
  }
  > div:nth-child(3) {
    margin: auto;
    margin-top: 0.1rem;
    width: 3.5rem;
    > h3 {
      font-size: 0.18rem;
      line-height: 0.3rem;
    }
    > div {
      display: flex;
      justify-content: space-between;
      > div > img {
        width: 1.45rem;
      }
      > div:nth-child(2) {
        > div > img {
          width: 1.9rem;
        }
        > div:nth-child(1) {
          margin-bottom: 0.05rem;
        }
      }
    }
  }
  > div:nth-child(4),
  div:nth-child(5) {
    margin: auto;
    margin-top: 0.1rem;
    width: 3.5rem;
    > h3 {
      font-size: 0.18rem;
      line-height: 0.3rem;
    }
    > .box1 {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      > div > img {
        width: 1.7rem;
      }
    }
  }
  > div:nth-child(5) {
    > .box2 > img {
      width: 3.5rem;
    }
    > .box1 > div {
      margin-bottom: 0.08rem;
    }
  }
}
</style>